<template>
<div class="shoppingcar">
    <div class="goodlist">
      <div class="mui-card" v-for="(item,index) in CarGoodList" :key="item.id">
          <div class="mui-card-content">
              <div class="mui-card-content-inner">
                  <div class="mui-input-row mui-checkbox">
                    <div class="info mui-ellipsis">
                         <img :src="item.img_url" class="pic left">
                        <span class=" title">{{item.title}}</span>
                        <div class="price">
                            <span>￥{{item.sell_price}}</span>
                            <div class="countbox">
                                <div class="reduce" @click="reducegoods()">-</div>
                                <input class = "count" :value="$store.getters.getGoodsCount[item.id]" >
                                <div class="add" @click="addgoods()">+</div>
                            </div>
                            <span @click="remove(item.id,index)">删除</span>
                        </div>
                        <!-- add reduce -->    
                        <!-- {{$store.getters.getGoodsCount[item.id]}}                                       -->
                    </div>     
                        <input name="checkbox1" type="checkbox" checked>
                  </div>  
              </div>
          </div>
      </div>
	    
    </div>
    
    <shopcarcount></shopcarcount>
</div>
</template>
<script>
import shopcarcount from "./component/shopcarcount"
export default {
    name:"Buycar",
    data(){
        return{
            goodslist:[],
            // goodscount:1,
            CarGoodList:[]
        }
    },
    created(){
      this.getCarGoodList()
      
    },
  
    methods:{
        
        getCarGoodList(){
            let arr = []
            this.$store.state.car.forEach(item=>{
                arr.push(item.id)
            })
            var id = arr.join(",")
            if (arr.length <= 0){
                return
            }
            this.$axios({
                method:"get",
                url:"http://www.liulongbin.top:3005/api/goods/getshopcarlist/"+id
            }).then((res)=>{
                console.log(res.data.message)
                this.CarGoodList = res.data.message
            })
        },
        remove(id,index){
            this.CarGoodList.splice(index,1)
            this.$store.commit("removeGood",id)
        },
        //  addgoods(){
        //     if(this.goodscount == this.goodslist.stock_quantity){
        //         this.goodscount = this.goodslist.stock_quantity
        //         return
        //     }
        //     this.goodscount++
        // },
        // reducegoods(){
        //     if(this.goodscount == 1){
        //         this.goodscount = 1
        //         return
        //     }
        //     this.goodscount--
            
        // }
    },
    components:{
        shopcarcount
    }
}
</script>
<style scoped>
.left{
    float: left;
}
.right{
    float:right;
}
.title{
    margin-left: .1rem;

}
.price{
    
    overflow: hidden;
    color: red;
}
.price span{
    font-size: .32rem
}
.info{
    padding-right: 1rem;
}
.pic{
    vertical-align: top;
    height: 1rem;
    width: 1rem;
}
.countbox {
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        border:1px solid #ccc;
        color: #000;
    }
    .countbox div,input{
        text-align: center;
        height: .5rem;
        float: left;
        width: .7rem;
        background-color: #eee;
    }
    .countbox .count{
        padding:0;
        border-width:0;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background-color: #fff;
    }
</style>

